<?php global $ubi;?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TÙM LUM site</title>
<script type="text/javascript" src="include/script/jquery-1.4.4.min.js"></script>
<script type="text/javascript"
	src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script language="javascript"
	src="include/script/jquery-ui-1.8.14.custom.min.js"
	type="text/javascript"></script>
<script language="javascript" src="include/script/script.js"
	type="text/javascript"></script>
<script language="javascript" src="include/script/userScript.js"
	type="text/javascript"></script>
<script language="javascript" src="include/script/jquery.wysiwyg.js"
	type="text/javascript"></script>

<!--  <script language="javascript" src="include/script/infoScript.js" type="text/javascript"></script>-->

<link href="include/css/style.css" media="screen" rel="stylesheet"
	type="text/css" />
<link href="include/css/styles.css" type="text/css" media="all"
	rel="stylesheet" />
<link href="include/css/site.css" media="screen" type="text/css"
	rel="stylesheet" />
<link href="include/css/jquery.wysiwyg.css" type="text/css"
	rel="stylesheet" />
<link href="include/css/map.css" media="screen" type="text/css"
	rel="stylesheet" />

<script type="text/javascript" language="javascript">
		var map;
		var mapListenerEventClickOnMap;
		var clickOnMapEvent;
		var markerForNewProvider;
		
		var infoWindowString = '<div class="left infoWindow-img"><img src="{0}" /></div>' + 
			'<div class="right infoWindow-content">' + 
			'<ul>' + 
			'<li>Tên : {1}</li>' + 
			'<li>Địa chỉ : {2}</li>' +
			'<li><a href="{3}">Xem chi tiết</a></li>' +
			'</ul></div>';
					
		$(document).ready(function(){
			var icons = {
				header: "arrow_1",
				headerSelected: "arrow_2"
			};
			
			$('#blockAccordion').accordion({
				autoHeight: false,
				navigation: true,
				icons: icons
			});
			
			$.initialize();

			$('#blockSignIn').load('index.php?load&view=blockSignIn');
			$('#blockSearch').load('index.php?load&view=blockSearch');
			$('#blockMembers').load('index.php?load&view=blockMembers');
			$('#blockNewestPosts').load('index.php?load&view=blockNewestPosts');
			$('#mainMenu').load('index.php?load&view=menu&location=map');
			$('#footer').load('index.php?load&view=footer');

			$.loadListLocation($('#selCity'), 0, true);

			$('#selCity').change(function() {
				$.postToGetListLocation(this, $('#selDistrict'), true);	
			});

			$('#selDistrict').change(function() {
				$.postToGetListLocation(this, $('#selWard'), true);	
			});

			$('#btnXemBanDo').click(function() {
				var locationId; 
				if ($('#selWard').val() != null && $('#selWard').val() != '') {
					locationId = $('#selWard').val();
				} else if ($('#selDistrict').val() != null && $('#selDistrict').val() != '') {
					locationId = $('#selDistrict').val();
				} else if ($('#selCity').val() != null && $('#selCity').val() != '') {
					locationId = $('#selCity').val();
				}
				if (typeof locationId !== 'undefined') {
					$.post('index.php?location&action=loadByJSON', {region:locationId}, function(data) {
						var locationAndProviders = $.parseJSON(data);
						var location = locationAndProviders.location;
						map.setCenter(new google.maps.LatLng(location.latitude, location.longitude));
						map.setZoom(location.zoom); 

						var providers = locationAndProviders.providers;
						var infoWindows = [];
						for (var i = 0; i < providers.length; i++) {
							var provider = providers[i];
							var markerOption = {
								map : map,
								title: provider.name,
								position : new google.maps.LatLng(provider.lat, provider.long)
							};
							var marker = new google.maps.Marker(markerOption);
							var infoWindow = new google.maps.InfoWindow({
							    content: String.format(infoWindowString, provider.img, provider.name, provider.address, provider.link),
							    maxWidth : 410
							});
							infoWindows.push(infoWindow)
							$.addInfoWindowToMarker(marker, infoWindows, i);
						}
					});
				}
			});
			
			$('#btnInputProvider').click(function() {
				$('#messGuide').html('Hãy xác định địa điểm trên bản đồ, bằng cách click trái chuột !!!');
				$(this).addClass('btn-selected');
				mapListenerEventClickOnMap = google.maps.event.addListener(map, 'click', function(event) {
					$('#messGuide').html('Double click lên marker để nhập thông tin chi tiết cho địa điểm đó.<br />'
							+ 'Hay right click lên marker để bỏ địa điểm hiện tại và xác định địa điểm mới');
					$.placeMarker(event.latLng);
				});
			});
		});	
	
		$.extend({
			initialize: function() {
				var myLatlng = new google.maps.LatLng(<?php echo $ubi['SITE']['VIETNAM_LATITUDE'] ?>, <?php echo $ubi['SITE']['VIETNAM_LONGITUDE']?>);
				var myOptions = {
				  zoom: <?php echo $ubi['SITE']['ZOOM'][-1]?>,
				  center: myLatlng,
				  mapTypeId: google.maps.MapTypeId.ROADMAP
				};
				map = new google.maps.Map(document.getElementById("map"), myOptions);
			},
			addInfoWindowToMarker: function(marker, infoWindows, index) {
				google.maps.event.addListener(marker, 'click', function() {
					for (var i = 0; i < infoWindows.length; i++) {
						infoWindows[i].close();
					}
					infoWindows[index].open(map,marker);		
				});	
			},
			listenerToClickEventOnMap : function(e) {
				$.placeMarker(event.latLng);
			},
			placeMarker: function(location) {
				if (!markerForNewProvider) {
					markerForNewProvider = new google.maps.Marker({
					      map: map
					});
				} else if (markerForNewProvider.getMap() == null) {
					markerForNewProvider.setMap(map);
				}
				
				markerForNewProvider.setPosition(location);
				
				google.maps.event.addListener(markerForNewProvider, 'dblclick', function(e) {
					var pos = markerForNewProvider.getPosition();
					var geocoder = new google.maps.Geocoder();
					geocoder.geocode({'latLng': pos}, function(results, status) {
					    if (status == google.maps.GeocoderStatus.OK) {
							var street = "";
							var ward = "";
							var district = "";
							var city = "";
							var components = results[0].address_components;
							for (var i = 0; i < components.length; i++) {
								var component = components[i];
								for (var j = 0; j < component.types.length; j++) {
									switch (component.types[j]) {
									case 'route' :
										street = component.long_name;
									case 'sublocality' :
										ward = component.long_name;
									case 'administrative_area_level_2':
										district = component.long_name;
									case 'administrative_area_level_1':
										city = component.long_name;
									}
								}
							}
							var param = {
								street : street,
								ward : ward,
								district : district,
								city : city,
								latitude : pos.lat(),
								longitude : pos.lng()
							};
							
					    	$('#dlgInputProvider').load('index.php?load&view=inputProvider', param, 
							    	function() {
								$(this).dialog({width:530, title:'Nhập địa điểm', modal:true, draggable:false, resizable:false, position:['center', 'top'] });
								$('#diadiem_input').wysiwyg();
								$('#comboCity').change(function() {
									$.postToGetListLocation(this, $('#comboDistrict'), true);	
								});

								$('#comboDistrict').change(function() {
									$.postToGetListLocation(this, $('#comboWard'), true);	
								});
							});	   
					    } 	
					});
					 
				});
				
				google.maps.event.addListener(markerForNewProvider, 'rightclick', function(e) {
					$('#messGuide').html('Hãy xác định địa điểm trên bản đồ, bằng cách click trái chuột !!!');
					markerForNewProvider.setMap(null);
				});
			}
		});	
	</script>
</head>

<body>
<div id="corners">
<div class="header" id="main-head">
<div id="hdr-info">
<div style="float: left"><img id="logo" src="include/imgs/logo4.png"
	alt="Tùm Lum site" width="235px" />
<p id="desc">Tùm Lum, Tả Pí Lù, chia sẻ tất cả ở đây</p>
</div>
<div class="nav">
<div id="mainMenu"></div>
<div style="clear: both"></div>
</div>
</div>
</div>
<!--end header-->

<div id="container_map">
<div class="left">
<div class="inputProviderArea">
	<?php
		if (isset($_SESSION['userid'])) { 
	?>
	<div class="left" id="messGuide">
		Click button "Nhập Địa Điểm" để chia sẻ những địa điểm bạn biết
	</div>
	<input type="button" value="Nhập địa điểm" id="btnInputProvider" class="right" />
	<div class="clear"></div>
	<?php
		} 
	?>
</div>
<div id="map"></div>
</div>

<div class="right">
<div class="aside">
<div class="blockRightSide" id="blockAccordion">
<h2 class="widgettitle"><a class="title_accordion">Chọn vị trí</a></h2>
<div class="blockRight">
<ul class="frm">
	<li class="input">
		<label>Thành phố</label> 
		<select id="selCity">
			<option value=""></option>
		</select>
	</li>
	<li class="input"><label>Quận/Huyện</label> <select id="selDistrict">
		<option value=""></option>
	</select></li>
	<li class="input"><label>Phường/Xã</label> <select id="selWard">
		<option value=""></option>
	</select></li>
	<li><label>&nbsp;</label> <input type="button" value="Xem bản đồ"
		id="btnXemBanDo" /></li>
</ul>
<hr />
</div>
<h2 class="widgettitle"><a class="title_accordion">Đăng nhập</a></h2>
<div class="blockRight" id="blockSignIn"></div>

<h2>
<div class="widgettitle"><a class="title_accordion">Tìm kiếm</a></div>
</h2>
<div class="blockRight" id="blockSearch"></div>

<h2>
<div class="widgettitle"><a class="title_accordion">Thành viên</a></div>
</h2>
<div class="blockRight" id="blockMembers"></div>

<h2 class="widgettitle"><a class="title_accordion">Bài Đăng Mới Nhất</a></h2>
<div class="blockRight" id="blockNewestPosts"></div>
</div>
</div>
</div>
<!--end right--></div>
<!--end container-->

<div id="footer" class="footer clearfix"></div>

<div id="dlgInputProvider"
	class="ui-corner-tl ui-corner-tr ui-corner-bl ui-corner-br"></div>
</div>

</body>
</html>
